<template>
  <view v-if="commontData.length > 0" class="userKB2">
    <view class="kb_title">
      <span class="ltitle">用户口碑</span>
      <div class="rmore" @click="jump">
        <span>查看更多</span>
        <image mode="aspectFit" class="rarror" src="/static/images/common/arror_right.png" />
      </div>
    </view>
    <view class="kb_comment">
      <view v-for="(it, idx) in commontData" :key="idx" style="margin-bottom:20px">
        <comment-item :comment-data="it" />
      </view>
    </view>
  </view>
</template>

<script>
import CommentItem from './koubei-list'
import { getKouList } from '@/apis/commont'
export default {
  name: 'CommodityComment',
  components: {
    CommentItem
  },
  props: {
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    showComment: Boolean,
    goods: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      commontData: [],
      commontGoodsId: '', // 当前评论商品id
      commontGoodsType: '' // 当前评论商品类型
    }
  },
  created() {
    this.getCommontType()
    this._getCommontList()
  },
  methods: {
    // 根据formType 进行 商品评论取值， 1商品，2套餐 3合伙人 4箱起
    getCommontType() {
      this.commontGoodsType = 1
      // this.commontGoodsType = this.query.goods_type
      this.commontGoodsId = this.goods.goods_id
      const { from_type, pack_type } = this.goods
      // 箱起
      if (from_type === 11) {
        this.commontGoodsType = 4
        this.commontGoodsId = this.goods.box_id
        // 合伙人
      } else if (this.goods.from_type === 9) {
        this.commontGoodsType = 3
        this.commontGoodsId = this.goods.goods_id
        // 套餐
      } else if (this.goods.type === 2) {
        if (pack_type === 2 || pack_type === 1) {
          this.commontGoodsType = 2
        }
        // 套餐
      } else if (from_type === 3) {
        this.commontGoodsType = 2
        this.commontGoodsId = this.goods.goods_id
      }
    },
    // 评论列表详情获取
    async _getCommontList() {
      // 箱起礼包 商品评论1.0 需求暂不支持此类型评论
      if (this.query.bonus_gift_id) {
        return
      }
      try {
        const { data } = await getKouList({
          page: 1,
          pageSize: 2,
          goodsId: this.commontGoodsId,
          goodsType: this.commontGoodsType
        })

        this.commontData = (data.pageInfo && data.pageInfo.rows) || []
        if (this.commontData.length > 0) {
          this.$emit('update:showComment', true)
        }
      } catch (error) {
        console.log(error)
      }
    },
    jump() {
      uni.navigateTo({
        url: `user-koubei?goodsId=${this.commontGoodsId}&goodsType=${this.commontGoodsType}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userKB2 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 36rpx 19rpx;
  margin-bottom: 20rpx;
  .kb_title {
    display: flex;
    justify-content: space-between;
    .ltitle {
      font-size: 28rpx;
      color: #000;
      font-family: PingFang SC;
      font-weight: bold;
    }
    .rmore {
      position: relative;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #666666;
      font-family: PingFang SC;
      // margin-right:20rpx;
    }
    .rarror {
      width: 20rpx;
      height:20rpx;
      margin-left: 10rpx;
    }
  }
  .kb_comment {
    margin-top: 48rpx;
  }
}
</style>
